import React, { Component } from 'react'
import { Modal, Table, Steps } from 'antd'
import columns from '../propList/columns'

const { Step } = Steps
export default class PropModal extends Component {
  // 关闭窗口
  handleClose = () => {
    this.props.modalCloseCallback()
  }

  renderStep = () => {
    const currentSteps = this.props.dataSteps

    if (!currentSteps) return ''

    const stepNo = currentSteps.length < 1 ? 0 : currentSteps.length - 1

    return (
      <div
        style={{
          marginBottom: 20,
          width: currentSteps.length !== 0 ? `${(currentSteps.length / 4) * 100}%` : 'auto',
        }}
      >
        <Steps current={stepNo}>
          {currentSteps.map(item => (
            <Step
              title={item.createUsersEntity.realityName}
              description={item.createUsersEntity.mobile}
              status={item.status === '0000' ? 'error' : 'finish'}
            />
          ))}
        </Steps>
      </div>
    )
  }

  // 渲染界面
  render() {
    const { showModal, dataSource } = this.props
    return (
      <Modal
        maskClosable={false}
        // confirmLoading={loading}
        onCancel={() => this.handleClose()}
        visible={showModal}
        width={1000}
        title="资产列表"
        footer={null}
      >
        {this.renderStep()}
        <Table
          // loading={loading}
          size="small"
          bordered
          dataSource={dataSource}
          rowKey={record => record.id}
          columns={columns}
          pagination={false}
        />
      </Modal>
    )
  }
}
